<script setup lang="ts">
import { ref, toRefs } from "vue";
import { onShow, onHide, onLoad } from "@dcloudio/uni-app";
import _ from "lodash";

let emit = defineEmits(["search", "input", "update:value"]);

let props = withDefaults(
  defineProps<{
    placeholder: string;
    value: string;
    delay: number;
    label: string;
    field?: string;
    inpType?: string;
    light?: boolean;
  }>(),
  { placeholder: "", value: "", delay: 200 }
);

let { placeholder, value, delay, label, field, light } = toRefs(props);

let debouncedChange = _.debounce((val) => {
  emit("search", val, field?.value);
}, delay.value);

let handleChange = (evt: any) => {
  let val = evt.detail.value;
  emit("input", val);
  emit("update:value", val);
  debouncedChange(val);
};
</script>

<template>
  <div class="form-item">
    <span :class="light ? 'name name-light' : 'name'">{{ label }}</span>
    <input
      type="number"
      :class="
        $slots.default ? 'search-input search-input-slot' : 'search-input'
      "
      v-model="value"
      :placeholder="placeholder"
      placeholder-style="color: #909399; fontSize: 14px;"
      @input="handleChange"
      @change="handleChange"
      v-if="inpType === 'number'"
    />
    <input
      type="digit"
      :class="
        $slots.default ? 'search-input search-input-slot' : 'search-input'
      "
      v-model="value"
      :placeholder="placeholder"
      placeholder-style="color: #909399; fontSize: 14px;"
      @input="handleChange"
      @change="handleChange"
      v-else-if="inpType === 'digit'"
    />
    <input
      type="password"
      :class="
        $slots.default ? 'search-input search-input-slot' : 'search-input'
      "
      v-model="value"
      :placeholder="placeholder"
      placeholder-style="color: #909399; fontSize: 14px;"
      @input="handleChange"
      @change="handleChange"
      v-else-if="inpType === 'password'"
    />
    <input
      v-else
      type="text"
      :class="
        $slots.default ? 'search-input search-input-slot' : 'search-input'
      "
      v-model="value"
      :placeholder="placeholder"
      placeholder-style="color: #909399; fontSize: 14px;"
      @input="handleChange"
      @change="handleChange"
    />
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<style lang="less" scoped>
.form-item {
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 112rpx;
}
.name {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  color: #333333;
  padding-right: 42rpx;
  padding-left: 34rpx;
}

.name-light {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #333333;
}

.search-input {
  height: 100%;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #333333;
  flex: 1;
  box-sizing: border-box;
  text-align: right;
  padding-right: 30rpx;
}
.search-input-slot {
  padding-right: 0rpx;
}
</style>
